


import React from 'react'
import { Form, Input, Row, Col, Button } from 'antd';
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons';
import { reg } from '../../utils/validate';
import { Link } from 'react-router-dom';
import { toast } from '../../utils/common';
import { ajax } from '../../api';
import "./index.scss"

export default function Register({ history }: any) {
    const [form] = Form.useForm()
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
    const tailLayout = {
        wrapperCol: {
            offset: 6,
            span: 18
        }
    }
    const onReset = () => {
        form.resetFields()
    }
    const onFinish = (value: any) => {
        form.validateFields()
            .then(async valid => {
                value.role = 1
                let { code, result }: any = await ajax.register(value)
                if (code == 200) {
                    history.push(`/login?username=${value.username}&phone=${value.phone}`)
                }
            })
            .catch(err => {
                toast.error("请填写有效的信息")
            })
    }
    const onFinishFailed = () => {
        toast.error("请填写有效的信息")
    }
    return (
        <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
            <div className='box' style={{ height: '430px' }}>
                <h2>欢迎注册管理系统</h2>
                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} onFinishFailed={onFinishFailed}>
                    <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item name="phone" label="手机号码" rules={[{ required: true, message: '请输入手机号码' },
                    { pattern: reg.phone, message: "请输入有效手机号" }]}>
                        <Input prefix={<PhoneOutlined />} placeholder="请输入手机号码" />
                    </Form.Item>
                    <Form.Item name="password" label="密码" hasFeedback rules={[{ required: true, message: '请输入密码' },
                    { pattern: reg.pwd, message: '请输入6-16位数字加字母' }]}>
                        <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item name="dbpassword" label="确认密码" dependencies={['password']} hasFeedback validateFirst rules={[{ required: true, message: '请输入确认密码' },
                    { pattern: reg.pwd, message: '请输入6-16位数字加字母' },
                    {
                        validator: (_, value) => {
                            if (value === form.getFieldValue('password')) {
                                return Promise.resolve();
                            } else {
                                return Promise.reject("两次密码不一致");
                            }
                        }
                    }]}>
                        <Input.Password prefix={<LockOutlined />} placeholder="请输入确认密码" />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Row>
                            <Col span={11}>
                                <Button block type="primary" htmlType="submit">
                                    注册
                                </Button>
                            </Col>
                            <Col offset={2} span={11}>
                                <Button danger type="primary" block htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Col>
                        </Row>
                    </Form.Item>
                    <Form.Item {...{ wrapperCol: { span: 24 } }}>
                        <Row justify="space-between">
                            <Col>
                                <Link to="/forgetpass">忘记密码</Link>
                            </Col>
                            <Col>
                                <Link style={{ color: 'orange' }} to="/login">已有账号，先去登录</Link>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

